<template>
  <el-dialog :modelValue="visiable" title="修改" width="500" @close="$emit('close')">
    <div class="dialog-proj">
      <el-form label-width="60px" :inline="false">
        <el-form-item label="分公司">
          <el-select v-model="proj.company" placeholder="请选择分公司" clearable>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="proj.name"></el-input>
        </el-form-item>
        <el-form-item label="简称">
          <el-input v-model="proj.shortName"></el-input>
        </el-form-item>

        <el-form-item label="电压">
          <el-select v-model="proj.dianya" placeholder="请选择电压等级" clearable>
            <el-option
              v-for="item in dianyaOptions"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateProj">修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import useProj from '@renderer/composables/useProj'
import { ElMessage } from 'element-plus'

const props = defineProps(['visiable', 'proj'])
const emit = defineEmits(['close'])

const options = [
  { id: 1, value: '线一' },
  { id: 2, value: '线二' },
  { id: 3, value: '天心' }
]

const dianyaOptions = [
  { id: 1, value: '110kV' },
  { id: 2, value: '220kV' },
  { id: 3, value: '330kV' },
  { id: 4, value: '500kV' },
  { id: 5, value: '750kV' },
  { id: 6, value: '±800kV' },
  { id: 7, value: '1000kV' }
]

const { update } = useProj()
const updateProj = async () => {
  await update({
    id: props.proj.id,
    company: props.proj.company,
    name: props.proj.name,
    shortName: props.proj.shortName,
    dianya: props.proj.dianya
  })
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
  emit('close')
}
const cancel = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.dialog-proj {
  @apply mt-5;
}
</style>
